<template>
  <div class='container'>
    <div class="view">
      <el-dialog
        :visible.sync="dialogFormVisible"
        title="题目预览"
        width="720px">
        <!-- tab组件 -->
        <el-row class="first">
          <el-col :span="6">
            <span>【题型】：{{formBase.questionType==1?'单选':'多选'}}</span>
          </el-col>
          <el-col :span="6">
            <span>【编号】：{{formBase.id}}</span>
          </el-col>
          <el-col :span="6">
            <span>【难度】：{{formBase.difficulty==1?'简单':'困难'}}</span>
          </el-col>
          <el-col :span="6">
            <span>【标签】：{{formBase.tags}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span>【学科】：{{formBase.subjectName}}</span>
          </el-col>
          <el-col :span="6">
            <span>【目录】：{{formBase.directoryName}}</span>
          </el-col>
          <el-col :span="6">
            <span>【方向】：{{formBase.direction}}</span>
          </el-col>
        </el-row>
        <hr>
        <el-row>
          <el-col>
            <div style="margin-top:20px">【题干】：</div>
              <p style="color:blue" v-html="formBase.question"></p>
              <div>{{formBase.questionType == 1 ? '单选' : '多选'}} 选项：(以下选中的选项为正确答案)</div>
              <!-- 单选按钮 -->
              <div  v-if="formBase.questionType==1">
                <el-radio
                v-for="item in formBase.options"
                :key="item.id"
                :value="item.id"
                style="margin-top:10px"
                :isRight="item.isRight"
                :label="radio">{{item.code}}:{{item.title}}</el-radio>
              </div>
              <!-- 多选按钮 -->
              <div v-else-if="formBase.questionType==2">
                <el-checkbox
                v-for="item in formBase.options"
                :key="item.id"
                :value="radio"
                style="margin-top:10px"
                :isRight="item.isRight"
                v-model="!!item.isRight"
                :label="item.isRight">{{item.code}}:{{item.title}}</el-checkbox>
              </div>
              <!-- 简答题 -->
              <!-- <div v-else>
                <el-form-item label="">
                </el-form-item>
              </div> -->
          </el-col>
        </el-row>
        <hr>
        <el-row>
          <div style="margin-top:20px">
            <div class="clearfix">【参考答案】：
              <el-button type="danger" @click="playVideo">视频答案预览
              </el-button>
            </div>
            <video width= "300px" height="300px" style="float: left" :src="formBase.videoURL" v-if="isPlaying"></video>
          </div>
        </el-row>
        <hr>
        <el-row>
           <div style="margin-top:20px">【答案解析】：<span style="display:inline-block" v-html="formBase.answer"></span></div>
        </el-row>
        <hr>
        <el-row>
           <div style="margin-top:20px"><span>【题目备注】：{{formBase.remarks}}</span></div>
        </el-row>
         <el-row><div style="margin:20px auto">
           <el-button
           type="primary"
           @click="hChangeDialog"
           >关闭
           </el-button>
           </div>
           </el-row>
        </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Mypreview',
  // 接收父组件传参
  props: {
    formBase: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // props: ['value']
      dialogFormVisible: false,
      isPlaying: false,
      radio: this.formBase.initAnsId,
      checked: null
    }
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
      console.log(this.radio)
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    hChangeDialog () {
      this.dialogFormVisible = false
      this.isPlaying = false
    },
    // 播放视频
    playVideo () {
      this.isPlaying = !this.isPlaying
    }
  },
  watch: {
    // 监听该id下isRight的变化
    'formBase.initAnsId': function (newVal) {
      this.radio = newVal
    }
  }
}
</script>

<style scoped >
.container .el-dialog__header {
  height: 50px;
}
.clearfix:after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.container .first {
  margin-bottom: 20px;
}
.el-radio {
  display: block;
}
.el-checkbox {
  display: block;
}
</style>
